<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>
    <link rel="stylesheet" href="css/jquery-ui.css"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/city-picker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/jquery-impromptu.min.css" type="text/css"/>
</head>
<body>
    <div id="app_type_dialog" style="display:none" class="mt10" title="附加审批文件">
        <div class="box">
            <div class="box_center">
                <table class="form_table pb15" id="fee_append_table" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_right">嫌疑人报销单</td>
                        <td>
                                <span class="pl5">
                                    <input type="button" id="suspect_fee_table" name="button" class="btn1 btn82 btn_add" value="填写">
                                </span>
                            <span class="ui-state-error-text"><i class='ui-icon ui-icon-circle-close'></i>未填写</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_right">超标交通报销单</td>
                        <td>
                                <span class="pl5">
                                    <input type="button" id="over_fee_table" name="button" class="btn1 btn82 btn_add" value="填写">
                                </span>
                            <span class="ui-state-error-text"><i class='ui-icon ui-icon-circle-close'></i>未填写</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_right">自驾车里程附件</td>
                        <td class="" id="upload_area">
                            <form id="upload_file_area" action="Upload" method="post" enctype="multipart/form-data">
                                <input id="upload" type="file" style="display: none" multiple name="files[]" class="input-text lh30" size="10">
                            </form>
                            <a class="ext_btn" id="uploadButton"><span class="upload"></span>上传</a>
                            <input id="filearea" type="text" class="input-text lh25" disabled size="50" placeholder="未上传任何附件，请上传里程照片">
                            <span class="ui-state-error-text"><i class='ui-icon ui-icon-circle-close'></i>未上传</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div id="suspect_fee" class="mt10">
        <div class="box">
            <div class="box_border">
                <div class="box_center"></div>
                <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_right" valign="top">嫌疑人姓名：</td>
                        <td class="" >
                            <textarea style="border-color:red" name="" id="suspect_name" placeholder="请输入嫌疑人姓名，多人请用逗号分隔" cols="30" rows="10" class="textarea"></textarea>
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_right">嫌疑人总费用：</td>
                        <td height="40px" style="line-height:40px">
                            <input type="number" name="pre_suspect_fee" value="2310" class="input-text lh25" id="pre_suspect_fee" size="20" disabled>
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_right">生活费：</td>
                        <td>
                            <input type="number" placeholder="嫌疑人生活费" name="suspect_life_fee" value="0" class="input-text lh25" id="suspect_life_fee" size="20">
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_right">交通费：</td>
                        <td>
                            <input type="number" placeholder="嫌疑人交通费" name="suspect_road_fee" value="0" class="input-text lh25" id="suspect_road_fee" size="20">
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_right">其它费用：</td>
                        <td>
                            <input type="number" placeholder="嫌疑人其它费用" name="suspect_other_fee" value="0" class="input-text lh25" id="suspect_other_fee" size="20">
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_right">是否均有票：</td>
                        <td class="">
                            <input type="radio" name="hasReceipe" value="1"> 是
                            <input type="radio" name="hasReceipe" value="0" checked> 否
                        </td>
                    </tr>
                    <tr id="non_rece_area">
                        <td class="td_right" valign="top">无票理由：</td>
                        <td class="">
                            <textarea name="" id="non_rece_reason" placeholder="请描述无票理由" cols="35" rows="20" class="textarea"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/jquery-impromptu.min.js"></script>
<script>


    //辅助函数，处理上传文件
    function processUploadFile(){
        $('#upload_file_area').attr('action', url+'UploadFile.php');
        $('#uploadButton').click(function(){
            if($(this).hasClass('disabled')){
                return;
            }
            $('#upload').click();
        });
        $('#upload').change(function(){
            var fileStr= $(this).val();
            if(fileStr == ''){
                $('#filearea').val('');
                return;
            }
            var files = fileStr.split(',');
            if(files.length > 3){
                $.prompt( "<h3>请最多上传三个文件</h3>",{
                    title: '错误提醒',
                    buttons: {'确定': true}
                });
                return;
            }
            var tempStr = '';
            var isOk = true;
            for(var i = 0; i < files.length; i++){
                var filename = files[i].substring(files[i].lastIndexOf('\\') + 1);
                var fileExt = files[i].substring(files[i].lastIndexOf('.') + 1);
                fileExt = fileExt.toLowerCase();
                if(fileExt == 'jpg' || fileExt == 'png' || fileExt == 'bmp' || fileExt == 'jpeg') {
                    tempStr += filename + ";";
                }
                else{
                    $.prompt( "<h3>仅支持图片格式文件上传</h3>",{
                        title: '错误提醒',
                        buttons: {'确定': true}
                    });
                    isOk = false;
                    break;
                }
            }
            if(isOk){
                $('#filearea').val(tempStr);
               $('#filearea').next().removeClass('ui-state-error-text').
                        html("<i class='ui-icon ui-icon-circle-check'></i>已上传");
            }
        })


        $('#clearFile').click(function(){
            $('#filearea').val('');
            $('#upload_file_area').reset();
            $('#clearFile').css('display', 'none');

        })
    }

    //辅助函数，处理是否有票的显示
    function processHasReceipe(){
        $('input[name="hasReceipe"]').click(function(){
            var v = $(this).val();
            if(v == 1){
                $('#non_rece_area').hide();
            }
            else{
                $('#non_rece_area').show();
            }
        });
    }

    //辅助函数，处理状态的改变
    function changeState(elem){
        $(elem).parent().next().removeClass('ui-state-error-text').html("<i class='ui-icon ui-icon-circle-check'></i>已审批")
    }

    //辅助函数，处理费用的和输入
    function processSuspectFeeInput(){
        $('#suspect_life_fee, #suspect_road_fee, #suspect_other_fee').bind('input propertychange', function(){
            processFee1($(this));
            processSuspectTotalFee();
        })
    }
    //辅助函数，处理嫌疑人预报销费用是否等于分项费用的判断
    function processSuspectTotalFee(){
        var fee1 = parseFloat(processFee1($('#suspect_life_fee')));
        var fee2 = parseFloat(processFee1($('#suspect_road_fee')));
        var fee3 = parseFloat(processFee1($('#suspect_other_fee')));

        var totalFee = fee1 + fee2 + fee3;


        var curElem = $('#pre_suspect_fee');
        if($(curElem).next().hasClass('state')){
            $(curElem).next().remove();
        }

        if(totalFee != parseFloat($('#pre_suspect_fee').val())){
            $(curElem).after("<span class='state ui-state-error-text'>" +
                    "<i class='ui-icon ui-icon-circle-close'></i>" +
                     totalFee + "不等于预报销费用</span>");
        }
        else{
            $(curElem).after("<span class='state'>" +
                    "<i class='ui-icon ui-icon-circle-check'></i>" +
                    "</span>");
        }
    }
    function processFee1(elem){
        if($(elem).next().hasClass('state')){
            $(elem).next().remove();
        }
        if($(elem).val() == ""){
            $(elem).val(0);
            return 0;
        }

        if($(elem).val() < 0 || !checkNum($(elem).val())){
            $(elem).after("<span class='state ui-state-error-text'>" +
                    "<i class='ui-icon ui-icon-circle-close'></i>" +
                    "</span>");
            return -1;
        }
        else{
            $(elem).after("<span class='state'>" +
                    "<i class='ui-icon ui-icon-circle-check'></i>" +
                    "</span>");

            return $(elem).val();
        }
    }

    $(function(){
        processUploadFile();
        processHasReceipe();
        processSuspectFeeInput();
    })


</script>
</html>